<template>
  <div class='app'>
    <h3 ref="test">组件</h3>
    <h4>{{msg}}</h4>
    <button @click='showH3Text'>点我提示h3标签内容</button>
    <School ref="text"></School>
  </div>
  <!-- ref
  1.ref同id
  2.可以直接写在标签中,或者写在组件中 ref = 'xxx'
  3.引用方法 this.$refs.xxx -->
</template>

<script>
	import School from './components/School'

export default {
		name:'App',
		components:{School},
    data() {
        return {
          msg:'欢迎学习Vue'
        }
      },
      methods: {
        showH3Text(){
				alert(this.$refs.test.innerText)
				console.log(this.$refs.text)

			}
      }
}
</script>

<style>
.app{
		background-color: gray;
		padding: 30px;
	}
</style>